<template>
    <div class="login-view">

        <div class="content-wrap">
            <div class="logo">
                <img src="@/assets/img/logo.png" alt="">
            </div>
            
            <p v-show="showPrompt">{{promptMessage}}</p>

            <input type="text" placeholder="请输入手机号码" v-model="mobile">
            <input type="password" placeholder="请输入密码" v-model="password">
            <router-link :to="'/home'" class="to-forgot">忘记密码？</router-link>

            <button @click="login">登录</button>


            <router-link :to="'/register'" class="to-register">没有账号？直接注册</router-link>
        </div>
        
        <!-- <my-footer></my-footer> -->
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: 'LoginView',
        data () {
            return {
                showPrompt: false,
                mobile: '',
                password: ''
            }
        },
        computed: {
            ...mapState({
                isLogin: state => state.user.isLogin,
                promptMessage: state => state.user.promptMessage,
                myinfo: state => state.user.myinfo
            })
        },
        methods: {
            login() {
                console.log(this.isLogin)
                let _this = this
                if(this.mobile == '' || this.password == '') {
                    alert('请输入账号和密码')
                } else {
                    let data = {
                        mobile: this.mobile,
                        password: this.password
                    };
                    this.$store.dispatch({
                        type: 'login',
                        data: data,
                        _this: _this
                    })
                }
            },

        }
    }
</script>

<style scoped>
    .login-view {
        height: calc(100vh - 60px);
        padding: 30px 30px;
        
    }
    .content-wrap {
        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .content-wrap .logo {
        height: 100px;
        margin-bottom: 15px;
    }
    .content-wrap .logo img {
        width: 100px;
    }
    .content-wrap input {
        margin: 5px 0;
        height: 36px;
        border: none;
        border-bottom: 2px solid #eee;
        outline: none;
    }
    .content-wrap button {
        margin: 15px 0;
        height: 36px;
        line-height: 36px;
        border: none;
        background: #FFF54C;
        border-radius: 3px;
    }
    .content-wrap .to-forgot {
        margin: 5px;
        text-align: right;
    }
    .content-wrap .to-register,
    .content-wrap .to-forgot{
        text-decoration: none;
        font-size: 12px;
        color: #aaa;
    }
</style>